//管控页面主体(测试阶段)
import React, { Component } from 'react';
import { connect } from 'dva';
import { Router, Route, Link } from 'dva/router';


//引入layout组件
import { Layout, Menu, Icon, Breadcrumb,Dropdown,message } from 'antd';
import { withRouter } from 'react-router-dom';
//引入样式表
import style from './controlSubject.less';

//引入logo图片
import logo from '../../assets/zu-36.png';
//引入修改密码模态框
import ChangePwd from './modal/ChangePwd';

//引入经济核算系统组件
import CheckingSystem from '../economicSystem/CheckingSystem';



//引入报表管理系统
import ReportingSystem from '../reportManagement/ReportingSystem';

//引入生产管理系统/报警管理组件
import AlarmManagement from '../../routes/production/AlarmManagement';

//引入生产管理系统/数据趋势分析
import DataTrend from '../../routes/production/DataTrend';

//引入安环管理系统/环保指标历史管理
import EnvironmentalHistory from '../theirmanagement/EnvironmentalHistory';

//引入安环管理系统/数据趋势分析
import EnvTrend from '../theirmanagement/EnvTrend'

//引入安环管理系统/指标超限报警管理
 import IndexTransfinite from '../theirmanagement/IndexTransfinite';
//后台配置/数据配置
import DataMapping from '../bgConfiguration/DataMapping';
//后台配置/数据配置
import DataEntry from '../bgConfiguration/DataEntry';
//后台配置/模型参数
import DataCon from '../bgConfiguration/DataCon';
//后台配置/数据配置/报警详情
 import DetailsAlarm from '../production/tab/DetailsAlarm';

//后台配置/数据配置/报警详情
import IndexDayTrend from '../theirmanagement/sub1/IndexDayTrend';

//土壤修复大数据模型
import DataModel from '../dataModel/DataModel';
import VideoDay from '../video/VideoDay';
import VideoHistory from '../video/VideoHistory';
import MyIcon from '../../components/common/MyIcon';
import request from '../../utils/request'
const { SubMenu } = Menu;
const { Header, Sider, Content } = Layout;
console.log(this.props)
const breadcrumbNameMap = {
 '/DataModel':"土壤修复数据模型",
  '/DataTrend': '数据趋势分析',
  '/DataEntry': '环保标准录入',
  '/CheckingSystem':'经济核算系统',
  '/AlarmManagement':'报警管理',
  '/ReportingSystem':'报表管理系统',
  '/DataMapping': '环保标准配置',
  '/DataCon': '数据模型参数配置',
  '/IndexTransfinite': '环保指标报警管理',
  '/EnvironmentalHistory':'环保指标数据管理',
  '/IndexTransfinite/IndexDayTrend': '报警详情',
  '/EnvironmentalHistory/EnvTrend':'数据详情',
  '/AlarmManagement/DetailsAlarm':'报警详情',
  '/VideoDay':"实时视频",
  '/VideoHistory':'历史视频'
};

const Home = withRouter((props) => {
  const { location } = props;
  const pathSnippets = location.pathname.split('/').filter(i => i);
 
  pathSnippets.splice(0,1)
  console.log(pathSnippets)
  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
    const url1 = `/controlSubject/${pathSnippets.slice(0, index + 1).join('/')}`;
   
    return (
      <Breadcrumb.Item key={url1}>
        <Link to={url1}>
          {breadcrumbNameMap[url]}
        </Link>
      </Breadcrumb.Item>
    );
  });
  console.log(extraBreadcrumbItems)
  const breadcrumbItems = [(
    <Breadcrumb.Item key="home">
      <Link to="/cockpit">驾驶舱</Link>
    </Breadcrumb.Item>
  )].concat(extraBreadcrumbItems);
  return (
  
    
     
      <Breadcrumb className={style.Breadcrumb}>
        {breadcrumbItems}
      </Breadcrumb>
  
  );
 
});
// const {location} = this.props
class Login extends Component {
  
  state = {
    collapsed: false,
    visible: false,
    Keys:[],
    logo:`../../assets/zu-36.png`,
    a:["3"]
  };
  componentDidMount() {
    if(this.props.location.pathname == '/controlSubject/CheckingSystem') {
      this.setState({
        a:['2']
      })
    }
    if(this.props.location.pathname == '/controlSubject/ReportingSystem') {
      this.setState({
        a:['3']
      })
    }
    if(this.props.location.pathname == '/controlSubject/AlarmManagement') {
      this.setState({
        a:['6']
      })
    }
    if(this.props.location.pathname == '/controlSubject/DataTrend') {
      this.setState({
        a:['7']
      })
    }
    if(this.props.location.pathname == '/controlSubject/EnvironmentalHistory') {
      this.setState({
        a:['9']
      })
    }
    if(this.props.location.pathname == '/controlSubject/IndexTransfinite') {
      this.setState({
        a:['10']
      })
    }
    if(this.props.location.pathname == '/controlSubject/DataMapping') {
      this.setState({
        a:['13']
      })
    }
    if(this.props.location.pathname == '/controlSubject/DataEntry') {
      this.setState({
        a:['14']
      })
    }
    if(this.props.location.pathname == '/controlSubject/DataCon') {
      this.setState({
        a:['15']
      })
    }
    if(this.props.location.pathname == '/controlSubject/DataModel') {
      this.setState({
        a:['20']
      })
    }
    if(this.props.location.pathname == '/controlSubject/VideoDay') {
      this.setState({
        a:['11']
      })
    }
    if(this.props.location.pathname == '/controlSubject/VideoHistory') {
      this.setState({
        a:['12']
      })
    }
  }
  //初始化,伸缩导航栏
  toggleCollapsed = (e) => {
    console.log(this.state.collapsed)
    this.setState({
      collapsed: !this.state.collapsed,
      Keys:[]
    });
  }


  //模态框套件
  handleCancel = () => {
    this.setState({ visible: false, });
  };


//修改密码
ChangePwd = () => {
  this.setState({
    visible:true
  })
}
//退出登录
logOut = () => {
  console.log('退出')
  request(`/hh-management-web/gnhj/login/logout`).then(data => {
    if(data.data.rc == 0) {
      message.success('退出成功')
      this.props.history.push("/")
    } else {
      message.success('退出失败')
    }
  })
}
//菜单点击事件
save = (e) => {
  console.log(e)
  
  if(e.key == '2') {
    //经济核算系统
    this.props.history.push("/controlSubject/CheckingSystem")
  }
  if(e.key == '3') {
    //报表管理系统
    this.props.history.push("/controlSubject/ReportingSystem")
  }
  if(e.key == '6') {
    //报警管理
    this.props.history.push("/controlSubject/AlarmManagement")
  }
  if(e.key == '7') {
    //数据趋势分析
    this.props.history.push("/controlSubject/DataTrend")
  }
  if(e.key == '9') {
    //环保指标数据管理
    this.props.history.push("/controlSubject/EnvironmentalHistory")
  }
  if(e.key == '10') {
    //环保指标报警管理
    this.props.history.push("/controlSubject/IndexTransfinite")
  }
  if(e.key == '13') {
    //后台配置/数据配置
    this.props.history.push("/controlSubject/DataMapping")
  }
  if(e.key == '14') {
    //后台配置/数据录入
    this.props.history.push("/controlSubject/DataEntry")
  }
  if(e.key == '15') {
    //后台配置/数据录入
    this.props.history.push("/controlSubject/DataCon")
  }
  if(e.key == '20') {
    //后台配置/数据录入
    this.props.history.push("/controlSubject/DataModel")
  }
  if(e.key == '11') {
    //视频/实时视频
    this.props.history.push("/controlSubject/VideoDay")
  }
  if(e.key == '12') {
    //视频/实时视频
    this.props.history.push("/controlSubject/VideoHistory")
  }

  if(e.key == '1') {
    if (document.documentElement.requestFullScreen) {
              document.documentElement.requestFullScreen();
          } else if (document.documentElement.mozRequestFullScreen) {
              document.documentElement.mozRequestFullScreen();
          } else if (document.documentElement.webkitRequestFullScreen) {
              document.documentElement.webkitRequestFullScreen();
          }
          window.location = '#cockpit';
  }


}
//控制收缩事件
onCollapse = (a,b) => {
  console.log(a,b)
}

//控制菜单展开事件
  setKeys = (key) => {
    console.log(key)

// 驾驶舱跳转
// goToIndexPage = () => {
//     // 浏览器全屏方法
//     if (document.documentElement.requestFullScreen) {
//         document.documentElement.requestFullScreen();
//     } else if (document.documentElement.mozRequestFullScreen) {
//         document.documentElement.mozRequestFullScreen();
//     } else if (document.documentElement.webkitRequestFullScreen) {
//         document.documentElement.webkitRequestFullScreen();
//     }
//     window.location = '#cockpit';
// }



 
    this.setState({
      Keys:[key[key.length-1]]
    })
    setTimeout(() => {
      console.log(this.state.Keys)
    })
   
  }
  onSelect = (a,b,c) => {
    console.log(a,b,c)
    this.setState({
      a:a.selectedKeys
    })
  }
  render() {
    console.log(this.props)
    

    const menu = (
      <Menu>
        <Menu.Item onClick={this.ChangePwd}>
          修改密码
        </Menu.Item>
        <Menu.Item onClick={this.logOut}>
          退出登录
        </Menu.Item>

      </Menu>
    )
    return (
      <div>
        <ChangePwd
         visible={this.state.visible}
         onCancel={this.handleCancel}
         onCreate={this.handleCreate}
        />
        <Layout className={style.Layout}
       
        >
          <Sider
            onCollapse={this.onCollapse}
            style={{ background: '#172431' }}
            trigger={null}
            collapsible
            collapsed={this.state.collapsed}
            className={style.Sider}
            width={170}
          >
            <div className="logo" />
            <div style={{ height: 64 ,overflow:'hidden'}}>
              <img src={logo} alt="" className={style.fillIn}
                style={{ background: '#172431' ,width:160}}
              />
            </div>
            <Menu
              style={{ background: '#172431' }}
              defaultSelectedKeys={['3']}
              // defaultOpenKeys={['sub1']}
              openKeys={this.state.Keys}
              onOpenChange={this.setKeys}
              onSelect={this.onSelect}
              selectedKeys={this.state.a}
              mode="inline"
              theme="dark"
              inlineCollapsed={this.state.collapsed}
            
            >
              <Menu.Item key="1" onClick={this.save}>
                <MyIcon type="icon-jiankong" className={style.MyIcon} />
                <span >管理驾驶舱</span>
              </Menu.Item>
              <SubMenu key="sub1" title={<span><MyIcon type="icon-gongneng" className={style.MyIcon} /><span>生产管理系统</span></span>}>
                <Menu.Item key="5" style={{fontSize:13}}>组态图</Menu.Item>
                <Menu.Item key="6" style={{fontSize:13}} onClick={this.save}>报警管理</Menu.Item>
                <Menu.Item key="7" style={{fontSize:13}} onClick={this.save}>数据趋势分析</Menu.Item>
              </SubMenu>

               <Menu.Item key="20" onClick={this.save}>
                <MyIcon type="icon-qian1" className={style.MyIcon} />
                <span  style={{fontSize:13}}  className={style.MyIcon_span}>土壤修复数据模型</span>
              </Menu.Item>


              <SubMenu key="sub2" title={<span><MyIcon type="icon-cheliangziliaoshenhe" className={style.MyIcon} /><span>安环管理系统</span></span>}>
                
                <Menu.Item key="9" style={{fontSize:13}} onClick={this.save}>环保指标数据管理</Menu.Item>
                <Menu.Item key="10" style={{fontSize:13}} onClick={this.save}>环保指标报警管理</Menu.Item>

              </SubMenu>
              <SubMenu key="sub3" title={<span><MyIcon type="icon-shipin-tianchong" className={style.MyIcon} /><span>视频管理系统</span></span>}>
                <Menu.Item key="11" style={{fontSize:13}} onClick={this.save}> 实时视频</Menu.Item>
                <Menu.Item key="12" style={{fontSize:13}} onClick={this.save}> 历史视频</Menu.Item>

              </SubMenu>

              <Menu.Item key="2" onClick={this.save}>
                <MyIcon type="icon-qian1" className={style.MyIcon} />
                <span  style={{fontSize:13}}  className={style.MyIcon_span}>经济核算系统</span>
              </Menu.Item>

              <Menu.Item key="3" onClick={this.save}>
                <MyIcon type="icon-webicon320" className={style.MyIcon} />
                <span style={{fontSize:13}}  className={style.MyIcon_span}>报表管理系统</span>
              </Menu.Item>

              <SubMenu key="sub4" title={<span><MyIcon type="icon-function" className={style.MyIcon} /><span>后台配置</span></span>}>
                <Menu.Item key="13" style={{fontSize:13}} onClick={this.save}>环保标准配置 </Menu.Item>
                <Menu.Item key="14" style={{fontSize:13}} onClick={this.save}>环保指标录入</Menu.Item>
                <Menu.Item key="15" style={{fontSize:13}} onClick={this.save}>数据模型参数配置</Menu.Item>
              </SubMenu>
              
            </Menu>
          </Sider>
          <Layout className={style.lay}>
            <Header style={{ background: '#172431', padding: 0,height:'7vh',lineHeight:'7vh'}}>
              <Icon
               
                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                onClick={this.toggleCollapsed}
                style={{ fontSize: 16, color: '#5BCBF2',cursor:'pointer' }}
              />
            <Dropdown overlay={menu} className={style.Dropdown}
            trigger={['click']}
            >
              <span className="ant-dropdown-link">
              系统管理员
              <Icon type="down" />
              </span>
            </Dropdown>
              {/* <Breadcrumb className={style.Breadcrumb}>
                <Breadcrumb.Item style={{ color: '#FFFFFF' }}>Home</Breadcrumb.Item>
                <Breadcrumb.Item style={{ color: '#FFFFFF' }}><a href="" style={{ color: '#FFFFFF' }}>Application Center</a></Breadcrumb.Item>
                <Breadcrumb.Item><a href="" style={{ color: '#FFFFFF' }}>Application List</a></Breadcrumb.Item>
                <Breadcrumb.Item style={{ color: '#FFFFFF' }}> An Application</Breadcrumb.Item>
              </Breadcrumb> */}
           <Home  style={{color:"#fff"}}/>
            </Header>
            <Content style={{ margin: 0, padding: 0, background: '#fff',height:"93vh"}}>
              {/* 引入了经济核算系统 */}
              <Route path="/controlSubject/CheckingSystem" component={CheckingSystem} />

            

              {/* 报表管理系统 */}
              <Route path="/controlSubject/ReportingSystem" component={ReportingSystem} />

                {/* 报警管理/报警详情 */}
                <Route path="/controlSubject/AlarmManagement/DetailsAlarm" component={DetailsAlarm} />

              {/* 生产管理系统/报警管理组件 */}
              <Route path="/controlSubject/AlarmManagement" component={AlarmManagement} exact={true}/>

              {/* 生产管理系统/数据趋势分析 */}
              <Route path="/controlSubject/DataTrend" component={DataTrend} />

                {/* 安环管理系统/数据详情 */}
                <Route path="/controlSubject/EnvironmentalHistory/EnvTrend" component={EnvTrend} />

              {/* 安环管理系统/环保指标数据管理 */}
              <Route path="/controlSubject/EnvironmentalHistory" component={EnvironmentalHistory} exact={true}/>

              {/* 安环管理系统/指标报警管理/当日报警详情*/}
              <Route path="/controlSubject/IndexTransfinite/IndexDayTrend" component={IndexDayTrend} />

              {/* 安环管理系统/环保指标报警管理 */}
              <Route path="/controlSubject/IndexTransfinite" component={IndexTransfinite} exact={true}/>

             

              {/* 后台配置/数据配置 */}
              <Route path="/controlSubject/DataMapping" component={DataMapping} />

              {/* 后台配置/数据录入 */}
              <Route path="/controlSubject/DataEntry" component={DataEntry} />
            {/* 后台配置/模型参数 */}
               <Route path="/controlSubject/DataCon" component={DataCon} />

            
            {/* 土壤修复大数据模型 */}
            <Route path="/controlSubject/DataModel" component={DataModel} />
               {/* 土壤修复大数据模型 */}
            <Route path="/controlSubject/VideoDay" component={VideoDay} />
             {/* 土壤修复大数据模型 */}
             <Route path="/controlSubject/VideoHistory" component={VideoHistory} />
               

            </Content>
          </Layout>
        </Layout>
      </div>
    );
  }
}
function mapStateToProps(state) {
  return {}
}
export default connect(mapStateToProps)(Login)
